<template>
  <div class="afterInvestDel-page">
    <pubChunk :mt="20">
      <span slot="title">产品相关性</span>
      <div slot="headLeft" class="relevance-tip">
        <div class="red-block"></div>
        高相关性≥0.8 (占比{{ highRelevanceRate || 0 }})
        <div class="yellow-block"></div>
        0≤低相关性≤0.3 (占比{{ lowRelevanceRate || 0 }})
        <div class="green-block"></div>
        负相关性&lt;0 (占比{{ negativeRelevanceRate || 0 }})
      </div>
      <div class="showChunk">
        <el-table
          v-loading="listLoading_productRelevance"
          :data="relevance_list"
          fit
          stripe
          size="mini"
          style="width: 100%"
          :cell-style="{ padding: '0',height:'40px' }"
          :header-cell-style="{ padding: '0', color: '#333',height:'40px',overflow:'hidden' }"
          :cell-class-name="relevanceTableRowClassName"
          header-cell-class-name="overflowHeader"
        >
          <el-table-column
            type="index"
            width="200"
            label="产品名称"
            :index="relevanceTitleHandle"
          >
            <template  slot-scope="scope">
              <div class="productName" style="line-height:15px;" :title="scope.row.strategyName">
                {{scope.row.strategyName}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :prop="`list[${i}].productRelevance`"
            :label="item.strategyName"
            v-for="(item, i) in relevance_list"
            :key="i"
            align="center"
            min-width="120"
          >
            <template slot="header">
              <div :title="item.strategyName" class="productName" style="line-height:15px;font-size:12px;min-width:100px">
                {{item.strategyName}}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </pubChunk>
  </div>
</template>
<script>
import pubChunk from '@/components/investComn/pubChunk.vue'
import { getCompositionStrategyRelevance } from '@/api/combManage'

export default {
  components: { pubChunk },
  data() {
    return {
      params: {
        compositionId: '',
      },
      highRelevanceRate: 0, // 高相关性占比
      lowRelevanceRate: 0, // 低相关性占比
      negativeRelevanceRate: 0, // 负相关性占比
      relevance_list: [],
      listLoading_productRelevance: false,
    }
  },
  props: {
    navActive: {
      type: String | Number,
    },
    userId: {
      type: String | Number,
    },
    id: {
      type: String | Number,
      default: '',
    },
    info: {
      type: Object | Array,
    },
  },
  created() {},
  mounted() {},
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.params.compositionId = newVal
        this.getProductRelevance(2)
      },
      deep: true,
    },

    navActive: {
      handler(newVal, oldVal) {
        if (newVal === 1) {
          this.getProductRelevance(2) // 相关性
        } else {
          this.getProductRelevance(1) // 相关性
        }
      },
    },
  },
  updated() {
    for (let index = 0; index < document.getElementsByClassName('productName').length; index++) {
      const element = document.getElementsByClassName('productName')[index];
      element.className = 'productName'
      if(element.offsetHeight > 40) {
        element.className = 'productName mlOverflow'
      }else{
        element.className = 'productName'
      }
    }
  },
  methods: {
    relevanceTableRowClassName({ row, rowIndex, columnIndex }) {
      const productRelevance =
        columnIndex === 0 ? '-' : row.list[columnIndex - 1].productRelevance
      if (columnIndex === 0) {
        return ''
      } else if (productRelevance === '-') {
        return 'cell-row-default'
      } else if (+productRelevance >= 0.8) {
        return 'cell-row-high'
      } else if (+productRelevance < 0) {
        return 'cell-row-negative'
      } else if (+productRelevance <= 0.3 && +productRelevance >= 0) {
        return 'cell-row-low'
      } else {
        return 'cell-row-default'
      }
      // return "";
    },
    relevanceTitleHandle(i) {
      return this.relevance_list[i].strategyName
    },
    getProductRelevance(type) {
      this.listLoading_productRelevance = true
      getCompositionStrategyRelevance({
        relevanceStatus: type,
        ...this.params,
      }).then((res) => {
        this.listLoading_productRelevance = false
        this.relevance_list = res.body.list
        if (this.relevance_list.length) {
          this.highRelevanceRate =
            res.body.relevanceProportionVo.highRelevanceRate
          this.lowRelevanceRate =
            res.body.relevanceProportionVo.lowRelevanceRate
          this.negativeRelevanceRate =
            res.body.relevanceProportionVo.negativeRelevanceRate
        }
        // console.log("产品相关性 - ", res.body);
      })
    },
  },
}
</script>
<style scoped lang="scss">
.mlOverflow{
  max-height: 30px;
  &::after{
  content: "...";
    display: block;
    position: absolute;
    bottom: 2px;
    right: 12px;
    font-size: 18px;
    padding-left: 10px;
    padding-bottom: 4px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), #ffffff);
  }
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
  .mlOverflow::after{
    background: linear-gradient(to right, rgba(241, 245, 248, 0.8), rgba(241, 245, 248, 1));
  }
}
.afterInvestDel-page {
    .title {
      font-size: 26px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #262626;
    }
    .relevance-tip {
      line-height: 12px;
      display: flex;
      align-items: center;
      color: #666;
      font-size: 12px;
      margin-top: 10px;
      .yellow-block {
        width: 12px;
        height: 12px;
        background: rgba(255, 233, 0, 0.3000);
        margin: 0 3px;
      }
      .red-block {
        width: 12px;
        height: 12px;
        background: #FCC6BA;
        margin: 0 3px 0 8px;
      }
      .blue-block {
        width: 12px;
        height: 12px;
        background: #69c0ff;
        margin: 0 3px 0 8px;
      }
      .green-block {
        width: 12px;
        height: 12px;
        background: rgba(55, 186, 0, 0.3000);
        margin: 0 3px 0 8px;
      }
      .gray-block {
        width: 12px;
        height: 12px;
        background: #f5f5f5;
        margin: 0 3px 0 8px;
      }
  
    }
  }
</style>
